<template>
	<view class="" style="width: 100%;">
		<view class="" style="width: 100%;" v-for="item in chartData" :key="item.chartId">
			<view class="chartTitle">
				<u-divider :text="item.chartName" textSize="30" textColor="#3c9cff"></u-divider>
			</view>
			<view class="charts-box">
				<qiun-data-charts :type="item.type" :opts="opts" :chartData="item.chartData" />
			</view>
		</view>
	</view>

</template>

<script>
	import {
		getChartDetail,
		getChartData
	} from '@/api/report.js';
	export default {
		data() {
			return {
				chartData: [],
				opts: {
					padding: [0, 0, 0, 0],
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: [15, 15, 0, 5],
					legend: {
						padding: 20,
					},
					xAxis: {
						disableGrid: true,
						rotateLabel: true,
					},
					yAxis: {
						data: [{
							min: 0,
							type: "value",
							position: "left",
							disabled: false,
							axisLine: true,
							axisLineColor: "#CCCCCC",
							calibration: false,
							fontColor: "#666666",
							fontSize: 13,
							textAlign: "right",
							title: "单位：吨",
							titleFontSize: 13,
							titleOffsetY: -10,
							titleOffsetX: 0,
							titleFontColor: "#666666",
						}]
					},
					extra: {
						column: {
							type: "group",
							width: 30,
							activeBgColor: "#000000",
							activeBgOpacity: 0.08
						},
						line: {
							type: "curve",
							width: 2
						},
						pie: {
							activeOpacity: 0.5,
							activeRadius: 10,
							offsetAngle: 0,
							labelWidth: 15,
							border: false,
							borderWidth: 3,
							borderColor: "#FFFFFF"
						}
					}
				},
				ids: {},
				chartList: [],
				tableData: [],
				detailData: {},
				jsonData: [],
				jsonArr: []
			};
		},
		onLoad(option) {
			this.ids = option;
		},
		mounted() {
			this.fetchData();
		},
		methods: {
			async fetchData() {
				const {
					data: detailData
				} = await getChartDetail({
					id: this.ids.reportId,
				})
				if (detailData.data.config_json) {
					this.chartList = JSON.parse(detailData.data.config_json)
				}
				this.getData()
			},
			getData() {
				let chartArr = []
				this.chartList.forEach(async ele => {
					const {
						data: detailData
					} = await getChartDetail({
						id: ele.chartId,
					})
					this.detailData = detailData.data
					if (this.detailData.config_json) {
						this.detailData.config_json = JSON.parse(detailData.data.config_json)
					}
					const {
						data
					} = await getChartData({
						id: ele.chartId,
					})
					this.datas = data.data
					chartArr.push(this.joinData(data.data, detailData.data))
				})
				this.chartData = chartArr
			},
			//组装数据
			joinData(data, json) {
				let obj = {}
				if (json.chart_type === 'pie') {
					// y轴数据   勾选了y的字段数组
					const yFieldObjList = json.config_json.filter((item) => {
						return item.y == true
					})
					let pieChartObj = {
						data: []
					}
					yFieldObjList.forEach((item) => {
						this.opts.yAxis.data[0].title = `单位:${item.company}`
						// 饼图展示总计
						const allValue = data
							.map((dataItem) => {
								return dataItem[item.field]
							})
							.reduce((preVal, nextVal) => {
								if (isNaN(nextVal)) {
									nextVal = 0
								}
								return preVal + Number(nextVal)
							}, 0)
						pieChartObj.data.push({
							name: item.name,
							value: allValue,
						})
					})
					let series = []
					series.push(pieChartObj)
					obj.chartData = {
						series: series,
					}
					obj.type = json.chart_type
					obj.chartId = json.chartId;
					obj.chartName = json.name
				} else {
					const xFieldList = json.config_json
						.filter((item) => {
							return item.x == true
						})
						.map((item) => {
							return item.field
						})
					// x轴数据
					let dataX = data.map((dataItem) => {
						let xAxisItem = ''
						for (let i = 0; i < xFieldList.length; i++) {
							xAxisItem += `${dataItem[xFieldList[i]]} `
						}
						return xAxisItem
					})
					// y轴数据   勾选了y的字段数组
					const yFieldObjList = json.config_json.filter((item) => {
						return item.y == true
					})
					// y轴数据组织
					const series = []
					yFieldObjList.forEach((item) => {
						console.log(item)
						// 指示器展示 单位存储
						this.opts.yAxis.data[0].title = `单位:${item.company}`
						const chartObj = {
							name: item.name,
							data: [],
						}
						chartObj.data = data.map((dataItem) => {
							return dataItem[item.field]
						})
						series.push(chartObj)
					})
					obj.chartData = {
						categories: dataX,
						series: series,
					};
					obj.type = json.chart_type;
					obj.chartId = json.chartId;
					obj.chartName = json.name
				}
				return obj
				// if (detailData.chart_type === 'pie') {
				// 	// y轴数据   勾选了y的字段数组
				// 	const yFieldObjList = detailData.config_json.filter((item) => {
				// 		return item.y == true
				// 	})
				// 	console.log(yFieldObjList)
				// 	let pieChartObj = {
				// 		data: []
				// 	}
				// 	yFieldObjList.forEach((item) => {
				// 		// 饼图展示总计
				// 		const allValue = this.tableData
				// 			.map((dataItem) => {
				// 				return dataItem[item.field]
				// 			})
				// 			.reduce((preVal, nextVal) => {
				// 				if (isNaN(nextVal)) {
				// 					nextVal = 0
				// 				}
				// 				return preVal + Number(nextVal)
				// 			}, 0)
				// 		pieChartObj.data.push({
				// 			name: item.name,
				// 			value: allValue,
				// 		})
				// 	})
				// 	let series = []
				// 	series.push(pieChartObj)
				// 	let obj = {
				// 		data: {
				// 			series: series,
				// 		},
				// 		type: detailData.chart_type
				// 	}
				// 	return obj
				// } else {
				// 	const xFieldList = detailData.config_json
				// 		.filter((item) => {
				// 			return item.x == true
				// 		})
				// 		.map((item) => {
				// 			return item.field
				// 		})
				// 	// x轴数据
				// 	let dataX = this.datas.map((dataItem) => {
				// 		let xAxisItem = ''
				// 		for (let i = 0; i < xFieldList.length; i++) {
				// 			xAxisItem += `${dataItem[xFieldList[i]]} `
				// 		}
				// 		return xAxisItem
				// 	})
				// 	// y轴数据   勾选了y的字段数组
				// 	const yFieldObjList = detailData.config_json.filter((item) => {
				// 		return item.y == true
				// 	})
				// 	console.log(yFieldObjList)
				// 	// y轴数据组织
				// 	const series = []
				// 	yFieldObjList.forEach((item) => {
				// 		// 指示器展示 单位存储
				// 		this.opts.yAxis.data[0].title = `单位:${item.company}`
				// 		const chartObj = {
				// 			name: item.name,
				// 			data: [],
				// 		}
				// 		// console.log(this.datas)
				// 		chartObj.data = this.datas.map((dataItem) => {
				// 			return dataItem[item.field]
				// 		})
				// 		series.push(chartObj)
				// 	})
				// 	let obj = {
				// 		data: {
				// 			categories: dataX,
				// 			series: series,
				// 		},
				// 		type: detailData.chart_type,
				// 	}
				// 	return obj
				// }
			},

		}
	};
</script>

<style scoped>
	/* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
	.charts-box {
		width: 100%;
		height: 300px;
	}
</style>
